<template>
  <div class="kui-layout layout-admin">
    <div class="kui-layout-header">
      <div class="kui-header-logo">倍思特管理后台</div>
      <div class="kui-header-menu"></div>
      <Dropdown class="kui-header-user">
        <div class="user-info">
          <Avatar class="avatar" icon="person" size="small"></Avatar>
          <span class="name">{{ $store.state.userInfo.realName }}</span>
          <Icon class="icon" type="arrow-down-b"></Icon>
        </div>
        <DropdownMenu slot="list">
          <DropdownItem>
            <Button type="text" @click="$router.push('/personal')">我的资料</Button>
          </DropdownItem>
          <DropdownItem>
            <Button type="text" @click="handleLogout">退出登录</Button>
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <!-- 边侧导航开始 -->
    <div class="kui-layout-slider">
      <Menu width="auto" :active-name="activeMenu" :open-names="openMenus" @on-select="handleMenu">
        <template v-for="(group, gdx) in $store.state.userMenus">
          <Submenu v-if="group.child" :key="group.name" :name="gdx">
              <template slot="title">
                  <Icon :type="group.icon"></Icon>{{ group.name }}
              </template>
              <Menu-item v-for="item in group.child" :key="item.name" :name="item.url">
                <Icon :type="item.icon"></Icon>{{ item.name }}
              </Menu-item>
          </Submenu>
          <Menu-item v-else :key="group.name" :name="group.url">
            <Icon :type="group.icon"></Icon>{{ group.name }}
          </Menu-item>
        </template>
      </Menu>
    </div>
    <!-- 边侧导航结束 -->
    <div class="kui-layout-content">
      <nuxt />
      <div class="kui-content-foot">
        <p>当前版本：v1.0</p>
        <p>直客网络技术支持&copy;2018</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 路由中间件
  middleware: 'auth',

  // 计算数据
  computed: {
    activeMenu: function () {
      return this.$route.path
    },
    openMenus: function () {
      const n = this.$store.state.userMenus.length
      // 按数字生成数组
      let getArray = length => Array.from({length}).map((v, k) => k)
      return getArray(n)
    }
  },

  // 页面函数
  methods: {
    // 菜单操作
    handleMenu(url) {
      this.$router.push(url)
    },
    // 退出登录
    async handleLogout() {
      const app = this
      let { data } = await app.$axios.post('/user/v1/logout')
      if (data.code === 100) {
        app.$store.dispatch('clearUserInfo')
        app.$router.push('/login')
      }
    }
  }
}
</script>

<style lang="less">
// 变量定义
@boxRange: 24px;

@defaultColor: #1890FF;
@fontColor: #333333;
@backColor: #f0f2f5;

@borderColor: #e8e8e8;
@borderRadius: 2px;

@headHeight: 64px;
@headBackImage: linear-gradient(143deg, #5f6bff 20%, #4b97fd 75%, #1890FF);
@deskHeight: 49px;
@sliderWidth: 190px;


// 布局样式
.kui-layout.layout-admin {
  .kui-layout-header {
    position: fixed;
    z-index: 1000;
    height: @headHeight;
    width: 100%;
    background-color: @defaultColor;
    background-image: @headBackImage;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .kui-header-logo {
      flex: none;
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      padding: 0 @boxRange;
    }
    .kui-header-menu {
      flex: auto;
    }
    .kui-header-user {
      flex: none;
      cursor: pointer;
      margin: 0 @boxRange;
      .user-info {
        display: flex;
        align-items: center;
        .avatar {
          flex: none;
          background-color: #69C0FF;
        }
        .name {
          flex: none;
          font-size: 14px;
          color: #ffffff;
          padding: 0 8px;
        }
        .icon {
          flex: none;
          font-size: 14px;
          color: #ffffff;
        }
      }
      .ivu-select-dropdown {
        padding: 0;
        margin-top: 10px;
        .ivu-dropdown-item {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }
  }
  .kui-layout-slider {
    position: fixed;
    z-index: 999;
    top: @headHeight;
    bottom: 0;
    left: 0;
    width: @sliderWidth;
    overflow: auto;
    background-color: #ffffff;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      display: block;
      height: 100%;
      width: 1px;
      background: @borderColor;
    }
  }
  .kui-layout-content {
    position: fixed;
    z-index: 998;
    top: @headHeight + @deskHeight;
    left: @sliderWidth;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: @backColor;
    .kui-content-wrap {
      position: relative;
      min-width: 900px;
      .kui-wrap-desk {
        position: fixed;
        z-index: 997;
        top: @headHeight;
        left: @sliderWidth;
        right: 0;
        height: @deskHeight;
        padding: 0 @boxRange;
        border-bottom: 1px solid @borderColor;
        background-color: #ffffff;
        .kui-desk-nav {
          font-size: 13px;
          line-height: @deskHeight - 1px;
        }
        .kui-desk-act {
          font-size: 13px;
          .kui-act-btn+.kui-act-btn {
            margin-left: 8px;
          }
        }
      }
      .kui-wrap-head {
        position: relative;
        padding: @boxRange;
        background-color: #ffffff;
        border-bottom: 1px solid @borderColor;
      }
      .kui-wrap-body {
        position: relative;
        padding: @boxRange / 2;
        .kui-body-section {
          .kui-section-item {
            position: relative;
            background-color: #ffffff;
            margin: @boxRange / 2;
            border-radius: @borderRadius;
            transition: all .2s;
            .kui-item-hd {
              border-bottom: 1px solid @borderColor;
              padding: @boxRange / 2 @boxRange;
              .kui-hd-title {
                font-size: 16px;
                line-height: @boxRange;
                font-weight: 500;
                height: @boxRange;
              }
              .kui-hd-desk {
                .ivu-tag {
                  height: @boxRange;
                  line-height: @boxRange;
                  margin: 0 0 0 2px;
                }
              }
            }
            .kui-item-bd {
              position: relative;
              padding: @boxRange / 2 @boxRange;
            }
          }
        }
      }
    }
    .kui-content-foot {
      margin: @boxRange * 2 0 @boxRange;
      min-width: 900px;
      text-align: center;
      font-size: 12px;
      color: rgba(0,0,0,.25);
    }
  }
}

// 公用样式
.kui-flex {
  display: flex;
  &.kui-flex-col {
    flex-direction: column;
  }
  &.kui-flex-wrap {
    flex-wrap: wrap;
  }
  &.kui-flex-center {
    justify-content: center;
  }
  &.kui-flex-between {
    justify-content: space-between;
  }
  &.kui-flex-around {
    justify-content: space-around;
  }
  &.kui-flex-middle {
    align-items: center;
  }
  .kui-flex-row-auto {
    flex: auto;
  }
  .kui-flex-row-none {
    flex: none;
  }
  .kui-flex-row-24 {
    flex: 0 0 100% / 24 * 24;
  }
  .kui-flex-row-18 {
    flex: 0 0 100% / 24 * 18;
  }
  .kui-flex-row-16 {
    flex: 0 0 100% / 24 * 16;
  }
  .kui-flex-row-14 {
    flex: 0 0 100% / 24 * 14;
  }
  .kui-flex-row-12 {
    flex: 0 0 100% / 24 * 12;
  }
  .kui-flex-row-10 {
    flex: 0 0 100% / 24 * 10;
  }
  .kui-flex-row-8 {
    flex: 0 0 100% / 24 * 8;
  }
  .kui-flex-row-6 {
    flex: 0 0 100% / 24 * 6;
  }
}
.kui-form-panel {
  background-color: #ffffff;
  padding: @boxRange / 2 0;
  // 重置样式
  .ivu-form-item {
    margin-bottom: @boxRange / 1.6;
    max-width: 32em;
  }
  .ivu-input[disabled], fieldset[disabled] .ivu-input {
    color: #495060;
  }
  .ivu-select-selection {
    border-radius: @borderRadius;
  }
  .ivu-select-dropdown {
    padding: 0;
    border-radius: @borderRadius;
  }
  .ivu-select-visible .ivu-select-selection {
    box-shadow: none;
  }
  .ivu-form-item-error-tip {
    top: 0;
    left: auto;
    right: 8px;
    padding-top: 0;
    line-height: 34px;
  }
}
.kui-table-panel {
  padding: @boxRange !important;
  .kui-table-sc {
    .kui-form-panel {
      padding: 0;
    }
  }
  .kui-table-hd {
    padding: 0 0 @boxRange / 2;
    .kui-hd-btn+.kui-hd-btn {
      margin-left: 6px;
    }
  }
  .kui-table-bd {
    th {
      text-align: center;
    }
    .kui-table_pic-large {
      padding: 0;
      .ivu-table-cell {
        padding: 4px;
        img {
          height: 100px;
          width: 100%;
        }
      }
    }
    .table-handle {
      button+button {
        margin-left: 8px;
      }
    }
    // 重置iveiw
    .ivu-tag {
      height: 22px;
      line-height: 20px;
      padding: 0 6px;
    }
  }
  .kui-table-ft {
    padding-top: @boxRange / 2;
    text-align: center;
  }
  // 重置样式
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev, .ivu-page-item {
    border-radius: @borderRadius;
  }
}
.kui-count-group {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  .kui-group-item {
    position: relative;
    flex: none;
    padding: @boxRange - 16 @boxRange * 1.1;
    text-align: center;
    &+.kui-group-item {
      margin-left: 1px;
      &::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 30%;
        display: block;
        height: 28px;
        width: 0;
        border-left: 1px solid @borderColor;
      }
    }
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      padding-right: 0;
    }
    .kui-item-label {
      font-size: 12px;
      color: lighten(@fontColor, 45%);
    }
    .kui-item-value {
      padding-top: 4px;
      font-size: 22px;
      line-height: 1em;
    }
  }
}
.kui-public-search .ivu-form  .ivu-form-item-content{
  display: inline-block !important;
  vertical-align: middle;
}
.public-title {
  h5 {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    margin-bottom: 16px;
  }
}
.ivu-row-flex .item{
  display: flex;
  justify-content: flex-start;
  line-height: 22px;
  padding-bottom: 16px;
  font-size: 12px;
  .item-hd,.item-bd{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item-bd{
    padding-left: 5px;
  }
}
.add-kefu{
  .ivu-form-item-content{
  max-width:20em;
  }
}
</style>
